<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>jqGrid</title>

    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

	<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="jqGrid/jqGrid.css" rel="stylesheet" type="text/css">

    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="../../js/momo.js"></script>
    <script src="jqGrid/jqGrid.js"></script>
</head>
<body>

<button>搜索</button>
<div id="icely" class="jqGrid jqGrid-center jqGrid-stripe"></div>
<hr/>
<div id="icely2" class="jqGrid jqGrid-center jqGrid-stripe"></div>

<script>

    var url = 'jqGrid/data.json';
    var editUrl = 'jqGrid/data.json';
    var colName = ['序号','用户名称','评论内容','评论时间','点赞数','操作'];
    var colModal = [
        // 后台字段名、宽度、超出部分是否用省略号显示、是否有排序按钮、自定义显示内容的函数名（td无title）
        { index: 'num', width:10, textOverflowEllipsis: true, sort: true },
        { index: 'name', width:20, textOverflowEllipsis: true, sort: true },
        { index: 'comment', width:40, textOverflowEllipsis: true, sort: false },
        { index: 'time', width:25, textOverflowEllipsis: true, sort: false },
        { index: 'count', width:20, textOverflowEllipsis: true, sort: false },
        { index: 'id', width:25, textOverflowEllipsis: true, sort: false, formatter: setOperate },// 传入id，操作表单
    ];
    function setOperate( val, rowData ){
        //console.log( val );
        //console.log( rowData );
        return '<a style="color: blue; cursor: pointer;" onclick="console.log(\'' + val + '\')">编辑</a>';
    }

    var tableObj = new $.jqGrid( $('#icely'), url, {}, colName, colModal, '300px', false, true, editUrl );
    var tableObj2 = new $.jqGrid( $('#icely2'), url, {}, colName, colModal, undefined, true, true, editUrl );

    setTimeout(function(){
        //tableObj.reloadData({aa:'bb'});
        //tableObj.remove();
    },4000);

    // 搜索，从第一页开始加载
    $('button').click(function(){
        tableObj.reloadData({aa:'bb'}, true);
    });

</script>

</body>
</html>